<template>
  <div class="contract-reminder-page">
    <div class="page-header">
      <h2>
        <el-icon><Bell /></el-icon>
        合同提醒
      </h2>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="到期提醒" name="expiring">
        <el-card>
          <el-table :data="expiringContracts" stripe>
            <el-table-column prop="code" label="合同编号" width="150" />
            <el-table-column prop="name" label="合同名称" min-width="200" />
            <el-table-column prop="endDate" label="到期日期" width="120" />
            <el-table-column prop="remainingDays" label="剩余天数" width="100">
              <template #default="{ row }">
                <el-tag :type="getDaysColor(row.remainingDays)">
                  {{ row.remainingDays }} 天
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150">
              <template #default="{ row }">
                <el-button type="primary" size="small" @click="handleRenew(row)">
                  续签
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="付款提醒" name="payment">
        <el-card>
          <el-empty description="暂无付款提醒" />
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Bell } from '@element-plus/icons-vue'

const activeTab = ref('expiring')

const expiringContracts = ref([
  {
    id: 1,
    code: 'CT2024001',
    name: '软件开发服务合同',
    endDate: '2024-12-31',
    remainingDays: 28
  },
  {
    id: 2,
    code: 'CT2024003',
    name: '产品销售合同',
    endDate: '2024-11-30',
    remainingDays: 15
  }
])

const getDaysColor = (days) => {
  if (days <= 7) return 'danger'
  if (days <= 30) return 'warning'
  return 'success'
}

const handleRenew = (row) => {
  ElMessage.info('续签功能开发中')
}
</script>

<style scoped>
.contract-reminder-page {
  padding: 20px;
}

.page-header h2 {
  margin: 0 0 20px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>

